import { FC } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import { RoutesProps, RouterViewProps } from './config.d'

/**
 * 1. 凡是别人传给我的，都需要注解 any
 * 2. 凡是我自己定义的，一般都能推断 （也可以注解）；但是如果你定义好的，在其他地方要使用，就必须注解
 *
 * 结论：只要你在定义的时候，注解好，其他地方就不用注解了
 */

function PrivateRoute({ Component, ...rest }: any) {
  return localStorage.getItem('token') ?
  <Component {...rest}/> :
  <Redirect to="/blankLayouts/login"/>
}



// 封装一个私有路由 导航守卫
const RouterView: FC<RouterViewProps> = (props) => {
  // 组件数组
  const RouterCom:RoutesProps[] = props.routes.filter((v: RoutesProps) => v.component);
  // 重定向数组
  const redirCom: RoutesProps[] =  props.routes.filter((v: RoutesProps) => v.redirect);

  // console.log('RouterCom:', RouterCom)
  // console.log('redirCom:', redirCom)



  return <Switch>

    {
      RouterCom.map(item => {
        // component={component} 自动将props传递下去
        // render={(props) => {}} // 需要手动传递
        return <Route key={item.path} path={item.path} render={(props) => {
          /**
           * 导航守卫功能：一般不会加在 后台管理系统中，后台系统本身就有权限，
           * 一般导航守卫功能，用在前台页面中（webapp, h5, 小程序）
           */
          // if (item.meta?.auth){
          //   return <PrivateRoute Component={item.component} {...props}/>
          // }
          return <item.component {...props} routes={item.children}></item.component>
        }}></Route>
      })
    }
    {/* {
      redirCom.map(item => {
        if (item.redirect) {
          // from? to
          return <Redirect key={item.path} from={item.path} to={item.redirect} />
        }
      })
    } */}
  </Switch>
}


export default RouterView;
